
import React from 'react';
import { createSwitchNavigator, createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import { Icon } from '@ant-design/react-native';
import { displayName } from '../../app.json';

import { Login, Home, Tab1,Tab2,Tab3,Tab4 } from '../pages'

const defaultNavigationOptions = {
    mode: 'card',
    headerMode : 'none',
    defaultNavigationOptions : {
        title : displayName,
        headerTintColor:'#fff',
        headerTitleStyle: { flex: 1, fontWeight: 'normal'},
        gesturesEnabled: false,
        headerPressColorAndroid : '#3e7fbf',
        headerBackTitle : '返回',
        headerStyle : {
            backgroundColor: '#3e7fbf',
        }
    }
}

const navigationOptions = (options, screenProps) => {
    const { params } = options.navigation.state;
    let title = options.navigationOptions.title
    if(!title){ title = displayName }
    return {
        title: params && params.title ? params.title : title
    }
}

const CardNavigator = createBottomTabNavigator({
    App_Tabs_1 : { 
        screen : createStackNavigator({ Tab: { screen: Tab1, navigationOptions : navigationOptions } },{ ...defaultNavigationOptions }), 
        navigationOptions: { tabBarLabel: '主页', tabBarIcon: ({ tintColor }) => ( <Icon name="home" size="md" color={tintColor} /> ) } 
    },
    App_Tabs_2 : { 
        screen : createStackNavigator({ Tab: { screen: Tab2, navigationOptions : navigationOptions } },{ ...defaultNavigationOptions }), 
        navigationOptions: { tabBarLabel: '任务', tabBarIcon: ({ tintColor }) => ( <Icon name="container" size="md" color={tintColor} /> ) } 
    },
    App_Tabs_3 : { 
        screen : createStackNavigator({ Tab: { screen: Tab3, navigationOptions : navigationOptions } },{ ...defaultNavigationOptions }), 
        navigationOptions: { tabBarLabel: '管理', tabBarIcon: ({ tintColor }) => ( <Icon name="yuque" size="md" color={tintColor} /> ) } 
    },
    App_Tabs_4 : { 
        screen : createStackNavigator({ Tab: { screen: Tab4, navigationOptions : navigationOptions } },{ ...defaultNavigationOptions }), 
        navigationOptions: { tabBarLabel: '设置', tabBarIcon: ({ tintColor }) => ( <Icon name="user" size="md" color={tintColor} /> ) } 
    },
},{
    lazy : true,
    swipeEnabled : true,
    backBehavior : 'none',
    tabBarOptions : {
        activeTintColor: '#fff',
        inactiveTintColor: '#ccc',
        showLabel : true,
        showIcon : true,
        style : {
            backgroundColor: '#3e7fbf',
        }
    }
});

const App = createStackNavigator({
    App_Tabs : CardNavigator,
    App_Home : { screen: Home, navigationOptions : navigationOptions },
},{ ...defaultNavigationOptions, headerMode : 'screen', })

export default createAppContainer(createSwitchNavigator(
    { Login: Login, App : App }, { initialRouteName: 'Login', ...defaultNavigationOptions  }
));
